<template>
    <div class="addProduce">
        <div class="addproduce">
            <el-form label-position="left" label-width="100px" :v-model="dataProduce">
                <el-form-item label="条形码(SKU):">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">有条码</el-radio>
                        <el-radio :label="2">无条码</el-radio>
                    </el-radio-group>
                    <p><el-input v-model="dataProduce.sku" placeholder="" v-if="radio == 1" :style="{width:'260px'}" /></p>
                </el-form-item>
                <el-form-item label="商品分类:">
                    <el-cascader v-model="value" :options="categorylist"
                        :props="{ expandTrigger: 'hover', label: 'catename', value: 'id' }"
                        @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="商品名称:">
                    <!-- 上传图片 -->
                    <el-upload :limit="5" list-type="picture-card" :file-list="fileList" :on-change="onChange"
                        action="http://dida100.com:8888/api/file/upload">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <!-- 设置主图 -->
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="minPic(file)">
                                    主图
                                </span>
                                <!-- 移除当前点击图片 -->
                                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-button type="primary" :style="{ marginTop: '30px' }">上传图片</el-button>
                </el-form-item>
                <el-form-item label="商品编码:">
                    <el-input :style="{width:'260px'}" v-model="dataProduce.produceId"></el-input>
                </el-form-item>
                <el-form-item label="是否上线:">
                    <el-switch v-model="change" active-color="##427af6" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否统一上架:">
                    <el-switch v-model="change" active-color="##427af6" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="市场价:">
                    <el-input :style="{width:'200px'}" v-model="dataProduce.price"></el-input>
                </el-form-item>
                <el-form-item label="默认佣金比例:">
                    <el-input :style="{width:'200px'}"></el-input>
                </el-form-item>
                <el-form-item label="商品简介:">
                    <el-input type="textarea" :style="{width:'350px'}" v-model="dataProduce.StorageConditions"></el-input>
                </el-form-item>
                <el-form-item>
                    <Editor api-key="no-api-key" :init="{
                        language: 'zh_CN',
                        plugins: [
                            'advlist',
                            'autolink',
                            'lists',
                            'link',
                            'image',
                            'charmap',
                            'preview',
                            'anchor',
                            'searchreplace',
                            'visualblocks',
                            'code',
                            'fullscreen',
                            'insertdatetime',
                            'media',
                            'table',
                            'code',
                            'help',
                            'wordcount,',
                        ],
                        toolbar:
                            'undo redo | blocks | ' +
                            'bold italic forecolor | alignleft aligncenter ' +
                            'alignright alignjustify | bullist numlist outdent indent | ' +
                            'removeformat |image| code help',
                        height: 650, //编辑器高度
                        min_height: 400,
                        images_upload_handler: upImg, //上传图片的处理器
                    }" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addprodece">提交商品</el-button>
                    <el-button @click="textt">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import Editor from "@tinymce/tinymce-vue";
import { GetCate, AddProduceList } from "@/api/produce";
export default {
    components: { Editor },
    data() {
        return {
            radio: 1,
            value: [],
            // 商品分类
            categorylist: [],
            //   添加商品
            dataProduce: {
                // 验证码
                sku: "",
                gallery:
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fupload.gogouai.com%2F2016%2F05%2F14630229430pzLMW.jpg&refer=http%3A%2F%2Fupload.gogouai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto",
                produceId:"",
                price:"",
                StorageConditions:""
            },
            change: true,
            //   图片
            fileList: [],
        };
    },
    created() {
        GetCate().then((res) => {
            // 三级分类
            this.categorylist = res.data.list;
        });
    },
    methods: {
        textt() {
            console.log(111);
            console.log(this.fileList);
        },
        addprodece() {
            AddProduceList(this.dataProduce).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "添加失败",
                        type: "warning",
                    });
                }
                this.dataProduce = '';
            });
        },
        // 三级
        handleChange(value) {
            console.log(value);
        },
        // 移除图片
        handleRemove(file) {
            var ind = this.fileList.findIndex(
                (item) => item.response.file.path === file.response.file.path
            );
            this.fileList.value.splice(ind, 1);
        },
        onChange(file, filelist) {
            this.fileList = filelist;
        },
        // 设置为主图
        minPic(file) {
            var ind = this.fileList.findIndex(
                (item) => item.response.file.path === file.response.file.path
            );
            var item = this.fileList.splice(ind, 1);
            this.fileList.unshift(item[0]);
        },
        // 富文本
        upImg(blobInfo) {
            // 返回一个promise承诺 bolbInfo 文件信息 progress进度
            return new Promise((resolve, reject) => {
                // 表单对象（上传文件都要用这个）
                const formData = new FormData();
                formData.append("file", blobInfo.blob(), blobInfo.filename());
                // 发送请求
                axios
                    .post("http://dida100.com:8888/api/file/upload", formData)
                    .then((res) => {
                        // 返回一个图片地址
                        resolve("http://dida100.com:8888" + res.data.file.path);
                    })
                    .catch((err) => reject(err));
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.addproduce {
    width: 80%;
    margin: 0 10%;
}
</style>